<!--
 * @Description: 相机组件
 * @Date: 2024-09-29 16:44:55
 * @FilePath: \demod:\12electron\b站向军课程\electron-camera\src\renderer\src\components\Camera.vue
-->
<template>
  <main
    class="w-screen h-screen flex"
    :class="config.shape === 'circle' ? 'rounded-full' : ''"
    :style="`border:solid ${config.borderWidth}  ${config.borderColor}`"
  >
    <video class="object-cover" :class="config.shape === 'circle' ? 'rounded-full' : ''"></video>
  </main>
</template>

<script setup lang="ts">
import { onMounted } from 'vue'
// import useConfig from '@renderer/composables/useConfig'
// const { config } = useConfig()

import { useConfigStore } from '@renderer/stores/useConfigStore'
const { config } = useConfigStore()

onMounted(() => {
  const constraints = {
    audio: false,
    video: {
      deviceId: config.deviceId
    }
  } as MediaStreamConstraints
  const video = document.querySelector('video')! // 感叹号表示一定存在，然后下方的video就不会显示可能为null的警告

  navigator.mediaDevices.getUserMedia(constraints).then((stream) => {
    video.srcObject = stream
    video.play()
  })
})
</script>

<style lang="scss" scoped>
main {
  background-color: rgba(123, 155, 223, 0.5);
}
</style>
